<template>
	<view class="content">
		 <view>
		
		 <view class="cu-form-group">
				<view class="title">小区名称</view>
				<picker @change="PickerChangeCommunity" :value="communityIndex" :range="communitys">
					<view class="picker">
						{{communityIndex>-1?communitys[communityIndex]:'请选择小区'}}
					</view>
				</picker>
			</view>
			
			<view class="cu-form-group">
				<view class="title">访客姓名</view>
				<input placeholder="请输入访客姓名" name="input"  @input="inputChange" data-name="name"></input>
			</view>
			
			<view class="cu-form-group">
				<view class="title">手机号码</view>
				<input placeholder="请输入访客手机号码"  name="input"  @input="inputChange" data-name="phone"></input>
			</view>
			
		  <view class="cu-form-group">
				<view class="title">到访人数</view>
				<picker @change="PickerChangePeople" :value="number_of_people" :range="peoples">
					<view class="picker">
						{{number_of_people>-1?peoples[number_of_people]:'请选择到访人数'}}
					</view>
				</picker>
			</view>
			
			<view class="cu-form-group">
				<view class="title">到访日期</view>
				<picker @change="PickerChangeDate" mode="date" >
					<view class="picker">
						{{visit_date ? visit_date : '请选择到到访日期'}}
					</view>
				</picker>
			</view>
			
			<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
			<view class="cu-form-group">
				<textarea maxlength="-1" :disabled="modalName!=null" @input="inputChange" data-name="visit_reason" placeholder="到访事由"></textarea>
			</view>
		
		  <view class="box margin-top-20" style=" padding: 20upx;">
			 
				<button @click="postForm" class="cu-btn block bg-blue margin-tb-sm lg">
				<text :class="loadding==1?'cuIcon-loading2 cuIconfont-spin':'cuIconfont-spin'"></text> 提交</button>
			 
			</view>
			
		 </view>
	</view>
</template>

<script>
	import beeApp from '../../beeApp.js'
	
	export default {
		data() {
			return {
				modalName: null,
				loadding:0,
				name:"",
				phone:"",
				peoples:["请选择人数","1人","2人","3人","4人","5人","6人","7人","8人","9人","10人"],
				content:'',
				number_of_people:-1,
				visit_date:'',
				communitylist:{},
				communityIndex:-1,
				communitys:[],
				user_info:{
					community:{
						
					}
				}
			}
		},
		onLoad() {
          // beeApp.alert("yiqwyei");
		  beeApp.getUserInfo((userInfo)=>{
			  this.userInfo = userInfo;
			  this.getCommunityHouses();
		  });
		},
		methods: {
			inputChange(e) {
				// console.log(e);
				var name = e.currentTarget.dataset.name;
				this[name] = e.detail.value
			},
			PickerChangePeople(e){
				
				this.number_of_people = e.detail.value;
				
			},
			PickerChangeDate(e){
				this.visit_date = e.detail.value;
			},
			
			PickerChangeCommunity(e){
				
				this.communityIndex = e.detail.value;
				var community_name =  this.communitys[this.communityIndex];
				this.community_id =  this.communitylist[community_name].id;
				
			},
			getCommunityHouses:function(){
				  var that = this;
                    beeApp.api("/api/community_houses/get",{
                        user_id:this.userInfo.user_id
                    },function(res){
                         if(res.code!=200){
							 beeApp.alert(res.msg);
                             return ;
                         }
						 var communitys =[];
						 var communitylist={};
						 for( var i in res.data.list){
							 var community_name = res.data.list[i]['community'].name;
							 console.log("community_name:",community_name);
							 if(!communitylist[community_name]){
								 console.log("community_name puhs:",community_name);
								communitys.push(community_name);
								communitylist[community_name] = res.data.list[i]['community'];
							 }
							 
						 }
						 console.log("communitys :",communitys);
						 that.communitylist = communitylist;  
						 that.communitys = communitys;  
                    });
			},
			getUserInfo:function(){
                    var that = this;
                    beeApp.api("/api/user/info",{
                        fields:"user_id,store_id,phone,nickname,avatarUrl,last_update_time"
                    },function(res){
                         if(res.code!=200){
							 beeApp.alert(res.msg);
                             return ;
                         }
						 that.user_info = res.data;
						 if(!res.data.community.id){
							  beeApp.alert("通过业主认证后才能添加访客",()=>{
								   uni.navigateBack() 
							  });
						 }
                        
                    });
                },
				postForm:function(){
				  var that = this;
				  if(that.loadding==1){
					  return;
				  }
				  
				  if(!this.community_id){
					  beeApp.alert("请选择小区");
					  return;
				  }
				  if(this.name==""){
					  beeApp.alert("请输入访客姓名");
					  return;
				  }
				  if(this.phone==""){
					  beeApp.alert("请输入访客手机号");
					  return;
				  }
				  if(this.number_of_people==-1){
					  beeApp.alert("请选择到访人数");
					  return;
				  }
				   if(this.visit_date==""){
					  beeApp.alert("请选择到访时间");
					  return;
				  }
				  that.loadding =1;
				  beeApp.api("api/community_visitor/add",{
					  shop_id:this.community_id,
					  name:this.name,
					  phone:this.phone,
					  visit_date:this.visit_date,
					  number_of_people:Number(this.number_of_people)-1,
					  visit_reason:this.visit_reason,
					  status:0,
					  method:"POST",
				  },function(res){
					  that.loadding =0;
					 if(res.code!=200){
						beeApp.alert(res.msg);
						return ;
					 }
					beeApp.alert("恭喜您，访客信息登记成功！",function(){
						beeApp.setPageData("pages/visitor/index",{reload:1});
						// uni.navigateBack();
						uni.redirectTo({
							url:'/pages/visitor/detail?id='+res.data.id
						})
					})
				  });
				},
	}
		
}
</script>
